<template>
    <div class="app">

        <div class="login">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="ruleForm.username"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="ruleForm.password"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!-- <el-button type="primary">主要按钮</el-button> -->
    </div>
</template>

<script>
import {login_req} from '@/api/login.js';

export default {
    data() {
        return {
            ruleForm: {
                username: '',
                password: '',
            },
            rules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' },
                ]


            }
        }
    },
    methods: {
        submitForm(ruleForm) {
            // console.log(ruleForm);
            // console.log(this.$refs.ruleForm);

            console.log(this.$refs);
            this.$refs[ruleForm].validate(async(validate)=>{
                console.log(validate);
                if(validate){
                    console.log(this.ruleForm);
                    const req = {
                        method:'post',
                        url:'login',
                        data:this.ruleForm,
                        headers:'application/x-www-form-urlencoded;charset=utf-8'
                    }
                    let result = await login_req(req);
                    console.log(result);

                    if(result.meta.status == 200){
                        console.log('跳转到主页');
                        window.sessionStorage.setItem('token',result.data.token);
                        this.$router.push({
                            path:'/home'
                        })
                    }
                }
            })

        },
        resetForm(ruleForm) {
            console.log(ruleForm);
            this.$refs[ruleForm].resetFields();
        }
    }
}
</script>

<style lang="scss" scoped>
.app {
    width: 100%;
    height: 100%;
    background-image: url('../../assets/img/dfgrhr.jpg');
    background-size:  100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    .login {
        width: 350px;
        height: 350px;
        border: 3px solid #b7395f;
        border-radius: 15%;
        
        display: flex;
        justify-content: center;
        align-items: center;
        
    }
}
</style>